<template>
	<m-layout class="search" :isShow="false">
		<view class="" slot="header">
			<m-search ref="Msearch" :focus="true" v-model="search" class="header" lIconColor="#111" :isJump="false"
				@goSearch='reset' />
			<!-- 条件筛选 -->
			<!-- <condition :sortPrice='sortPrice' @setType="sortPrice = $event" @setPrice="setPrice($event)"
				v-if="listArr.length>0" /> -->
		</view>

		<m-block radius="0" class="history" gap="0 24" v-if="listArr.length<=0">
			<view class="title flex-between">
				<text>搜索历史</text>
				<m-icon @click="remove" type="icon-shanchu" size="32" />
			</view>
			<view class="ul">
				<template v-if="historyList.length>0">
					<template v-for="item in historyList">
						<view class="tag" @click="goSearch(item)">
							<text>{{item}}</text>
						</view>
					</template>
				</template>
				<template v-else>
					<view class="hint">
						<text>没有搜索历史哦</text>
					</view>
				</template>
			</view>
			<!-- <view class="title flex-between">
				<text>猜你喜欢</text>
			</view>
			<view class="ul">
				<template v-for="item in likeList">
					<view class="tag" @click="goSearch(item)">
						<text>{{item}}</text>
					</view>
				</template>
			</view> -->
		</m-block>
		<m-block bgColor="unset" gap="24 24" v-else>
			<template v-for="item in listArr">
				<goodsCard :item="item" type="2"></goodsCard>
			</template>
			<m-loading gap="100 0" :list='listArr' :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
		</m-block>
	</m-layout>
</template>

<script>
	import { GetGoodsPage } from '@/api/Goods.js'
	import condition from "../components/condition.vue"
	export default {
		components: { condition },
		data() {
			return {
				type: '', //商品分区类型
				historyList: [],
				likeList: ['婴儿小推车', '儿童智力魔方', '婴儿磨牙棒', '儿童连体衣'],
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
				search: '',
				orderByField: 0,
				sortPrice: 0, //价格排序
				price_end: '', // 最高价
				price_began: '', // 最低价
				filterData: {},
				wards: 0,
			};
		},
		watch: {
			sortPrice() {
				this.reset();
			},
		},
		onLoad({ type, wards }) {
			this.type = type;
			this.historyList = this.Cookie.get('Search') || [];
			console.log(this.historyList)
			this.wards = wards || 0
		},
		methods: {
			setPrice(filterData = {}) {
				this.filterData = filterData;
				// 初始化搜索商品
				this.reset()
			},
			setType(type) {
				this.sortPrice = type
			},
			// 执行搜索商品
			goSearch(item) {
				this.search = item;
				console.log('this.search===>', item, this.search)
				this.reset();
			},
			// 清空
			remove() {
				this.historyList = [];
				this.Cookie.set('Search', [])
			},
			// 处理搜索数据
			setSearch(item) {
				const arr = this.historyList.filter(it => {
					return it != item
				})
				let str = [item, ...arr];
				this.Cookie.set('Search', str)
			},
			// 初始化
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			fiterData(obj) {
				if (obj.wards == -1) {
					delete obj.wards
				}
				return obj
			},
			// 获取商品列表
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { success, list, pageCount } = await GetGoodsPage(this.fiterData({
					tid: 0,
					key: this.search,
					pageIndex: this.pageIndex
				}));
				if (!success) {
					this.Toast('未查询到搜索的物品')
					this.listArr = [];
					return
				} else {
					// 处理搜索数据
					this.setSearch(this.search);
				}
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			// 刷新时 初始化搜索商品
			this.reset();
		},
		onReachBottom() {
			// 加载时 直接搜索商品
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.search {
		.header {
			::v-deep .search-Item {
				background: #F5F5F5;
			}
		}

		.history {
			height: 95vh;

			.title {
				padding: 30rpx 0;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.ul {
				.tag {
					margin-right: 30rpx;
					margin-bottom: 24rpx;
					display: inline-block;
					padding: 14rpx 17rpx;
					background: #F5F5F5;
					border-radius: 10px;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.hint {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}

	.filtrate {
		padding: 24rpx;
		display: grid;
		grid-template-columns: 1fr 1fr 0.5fr 1fr;
		background: #F6F6F6;

		view {
			text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.h4 {
			justify-content: flex-end;

			text {
				padding-left: 10rpx;
			}
		}

		.active {
			text {
				color: #FA2F43;
			}
		}
	}
</style>